/** * 运营管理-消息管理 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">运营管理</el-breadcrumb-item>
      <el-breadcrumb-item>消息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search" align="left">
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
        <el-button size="small" type="danger" @click="batchDel()">批量删除</el-button>
      </el-form-item>
      <el-form-item label="搜索:">
        <el-input size="small" v-model="formInline.title" placeholder="消息标题" class="searchInput"/>
        <el-select size="small" v-model="formInline.type" placeholder="消息类型" class="searchSelect">
            <el-option label="短信" value="短信"/>
            <el-option label="邮件" value="邮件"/>
            <el-option label="站内信" value="站内信"/>
        </el-select>
        <el-select size="small" v-model="formInline.sendScope" placeholder="发送范围" class="searchSelect">
            <el-option label="全体" value="全体"/>
            <el-option label="会员" value="会员"/>
            <el-option label="指定" value="指定"/>
        </el-select>
        <el-select size="small" v-model="formInline.active" placeholder="是否激活" class="searchSelect">
            <el-option label="已激活" value="2"/>
            <el-option label="未激活" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getdata()">搜索</el-button>
        <el-button size="small" type="danger" @click="clearConditon()">重置</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row border :row-key="getRowKeys" ref="multipleSelectable"
    @selection-change="handleSelectionChange" style="width: 100%" @sort-change="sortChange">
      <el-table-column align="center" type="selection" width="40" :reserve-selection="true"/>
      <el-table-column align="center" prop="id" label="序号" width="50"/>
      <el-table-column align="center" prop="type" label="消息类型" width="80"/>
      <el-table-column align="center" prop="activity.title" label="关联活动" width="100"/>
      <el-table-column align="center" prop="title" label="消息标题" width="150"/>
      <el-table-column align="center" prop="body" label="消息内容" width="200"/>
      <el-table-column align="center" prop="sendScope" label="发送范围" width="80"/>
      <el-table-column align="center" prop="sendTime" label="发送时间" width="150" />
      <el-table-column align="center" prop="active" label="是否激活" width="80">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.active=='2'?nshow:fshow" @change="editEnable(scope.row)" active-color="#13ce66" inactive-color="#ff4949"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="250">
        <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showUser(scope.row)">手动发送</el-button>
            <el-button size="mini" type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteOne(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather" align="center"/>
    <!-- 新增、编辑页面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="80%" :before-close="closeDialog">
      <el-form :inline="true" label-width="100px" :model="editForm" ref="editForm" :rules="rules">
        <el-form-item label="消息类型" prop="type" >
          <el-select size="small" v-model="editForm.type" placeholder="消息类型" class="mySelect">
            <el-option label="短信" value="短信"/>
            <el-option label="邮件" value="邮件"/>
            <el-option label="站内信" value="站内信"/>
          </el-select>
        </el-form-item>
        <el-form-item label="发送范围" prop="sendScope">
          <el-select size="small" v-model="editForm.sendScope" placeholder="发送范围" class="mySelect">
            <el-option label="全体" value="全体"/>
            <el-option label="会员" value="会员"/>
            <el-option label="指定" value="指定"/>
          </el-select>
        </el-form-item>
        <el-form-item label="发送时间" prop="sendTime">
          <el-date-picker v-model="editForm.sendTime" type="datetime" value-format="yyyy-MM-dd hh:mm:ss"
          placeholder="选择日期" style="width:193px" :picker-options="pickerOptions"/>
        </el-form-item>
        <el-form-item label="消息标题" prop="title" >
          <el-input size="small" v-model="editForm.title" style="width:500px;"/>
        </el-form-item>
        <el-form-item label="关联活动" prop="activity.title" >
          <el-input size="small" v-model="editForm.activity.title" placeholder="请点击选择"
          :disabled="true" @click.native="showActivity()"/>
        </el-form-item>
        <el-form-item label="消息体" prop="body">
          <el-input type="textarea" v-model="editForm.body" style="width:500px;" :rows="3"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button size="small" @click="cancelDialog">取消</el-button>
        <el-button size="small" type="primary" class="title"
          @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>
    <!-- 弹出的订单列表 -->
    <el-dialog :visible.sync="activityVisible" width="90%" @click="closeActivity()">
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline2" class="user-search" align="left">
        <el-form-item label="搜索:">
          <el-input size="small" v-model="formInline2.title" placeholder="活动标题" class="searchInput"/>
          <el-select size="small" v-model="formInline2.status" placeholder="活动状态" class="searchSelect">
              <el-option label="未开始" value="未开始"/>
              <el-option label="进行中" value="进行中"/>
              <el-option label="已完成" value="已完成"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="showActivity()">搜索</el-button>
          <el-button size="small" type="danger" @click="clearConditon2()">重置</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table size="small" :data="activityData" highlight-current-row border style="width: 100%">
        <el-table-column align="center" prop="id" label="序号" width="50"/>
        <el-table-column align="center" prop="title" label="活动标题" width="100"/>
        <el-table-column align="center" prop="description" label="活动介绍" width="150"/>
        <el-table-column align="center" prop="poster" label="活动海报" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.poster"  min-width="70" height="70" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="link" label="活动链接" width="150">
          <template slot-scope="scope">
            <a :href="scope.row.link" target="_blank" style="text-decoration:none">{{scope.row.link}}</a>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="startTime" label="开始时间" width="150"/>
        <el-table-column align="center" prop="endTime" label="结束时间" width="150"/>
        <el-table-column align="center" prop="status" label="活动状态" width="80"/>
        <el-table-column align="center" label="操作" min-width="80">
          <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="chooseActivity(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件2 -->
      <Pagination :child-msg="pageparm2" @callFather="callFather2" align="center"/>
    </el-dialog>
    <!-- 弹出的用户列表 -->
    <el-dialog :visible.sync="userVisible" width="54%" @click="closeUser()">
      <el-button size="small" type="danger" @click="send()">发送消息</el-button>
      <!--列表-->
      <el-table size="small" :data="userData" highlight-current-row border style="width: 100%"
      :row-key="getRowKeys" ref="userSelectable" @selection-change="userSelectionChange">
        <el-table-column align="center" type="selection" width="40" :reserve-selection="true"/>
        <el-table-column align="center" prop="id" label="序号" width="50"/>
        <el-table-column align="center" prop="name" label="姓名" width="110"/>
        <el-table-column align="center" prop="telphone" label="电话" width="150"/>
        <el-table-column align="center" prop="address" label="住址" width="150"/>
        <el-table-column align="center" prop="symptom" label="症状" width="150"/>
      </el-table>
      <!-- 分页组件3 -->
      <Pagination :child-msg="pageparm3" @callFather="callFather3" align="center"/>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../Pagination";
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      // 控制编辑页面显示与隐藏
      editFormVisible: false, 
      // 控制活动列表显示与隐藏
      activityVisible:false,
      // 控制用户列表显示与隐藏
      userVisible:false,
      // 新增、编辑页面的标题
      title: "添加",
      // 编辑页面数据
      editForm: {
        id: "",
        type: "",
        activityId: "",
        activity: {
          title:""
        },
        title: "",
        body: "",
        sendScope: "",
        sendTime: "",
        active: "",
        userId: "",
      },
      // 验证规则
      rules: {
        type: [
          {required: true,message: '请选择消息类型', trigger: 'blur'},
        ],
        title: [
          {required: true,message: '请输入消息标题', trigger: 'blur'},
        ],
        body: [
          {required: true,message: '请输入消息内容', trigger: 'blur'},
        ],
        sendScope: [
          {required: true,message: '请选择发送范围', trigger: 'blur'},
        ],
        sendTime: [
          {required: true, message: '请选择发送时间', trigger: 'blur' }
        ]
      },
      // 搜索框数据
      formInline: {
        type: "",
        title:"",
        sendScope: "",
        active:"",
        activityId:"",
      },
      // 活动页面搜索框数据
      formInline2: {
        title: "",
        active: "2",
        status: "",
      },
      // 表单数据
      listData: [], 
      // 活动数据
      activityData: [],
      // 用户数据
      userData: [],
      // 表单选择数组
      multipleSelection: [],
      // 用户数组
      userSelection: [],
      // 初始化分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      pageparm2: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
       pageparm3: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      // 时间插件
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      // 排序字段
      orderSort:"",
      orderKey:"",
      //要发送的消息id
      messageId:"",
    };
  },
  // 注册组件
  components: {Pagination},

  //创建完毕
  created() {
    // 获取传参
    this.formInline.activityId=this.$route.query.activityId;
    // 获取表单数据
    this.getdata();
  },

  // 定义方法
  methods: {
    // 清空搜索条件
    clearConditon(){
      this.formInline.type= "";
      this.formInline.title= "";
      this.formInline.sendScope= "";
      this.formInline.active= "";
      this.formInline.activityId= "";
      this.getdata();
    },
    // 获取表单数据
    getdata() {
      let queryEntity={
        currentPage:this.pageparm.currentPage,
        pageSize:this.pageparm.pageSize,
        entity:this.formInline,
        orderSort:this.orderSort,
        orderKey:this.orderKey
      };
      this.$axios.post("/business/message/condition",queryEntity)
      .then((res) => {
          if (res.data.code == 200) {
              this.listData = res.data.data.list;
              //对总数量进行赋值
              this.pageparm.total = res.data.data.total;
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
    },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.getdata();
    },
    callFather2(parm) {
      this.pageparm2.currentPage = parm.currentPage;
      this.pageparm2.pageSize = parm.pageSize;
      this.showActivity();
    },
    callFather3(parm) {
      this.pageparm3.currentPage = parm.currentPage;
      this.pageparm3.pageSize = parm.pageSize;
      this.getUserData();
    },
    // 排序方法
    sortChange(column) {
        if (column.order == "ascending") {
          this.orderSort = 'asc'
        } else if (column.order == "descending") {
          this.orderSort = 'desc'
        } else {
          this.orderSort = ''
        }
        this.orderKey=column.prop;
        this.getdata();
      },
    //显示新增、编辑界面
    handleEdit: function (obj) {
      this.editFormVisible = true;
      if (obj != undefined && obj != "undefined") {
        this.title = "修改";
        //填充数据
        this.editForm = obj;
      } else {
        this.title = "添加";
        //清空数据
        this.editForm.id = "";
        this.editForm.type = "";
        this.editForm.activityId = "";
        this.editForm.title = "";
        this.editForm.body = "";
        this.editForm.sendScope = "";
        this.editForm.sendTime = "";
        this.editForm.active = "1";
        this.editForm.userId = "1";
      }
    },
    clearConditon2(){
      this.formInline2.title= "";
      this.formInline2.active= "";
      this.formInline2.status= "";
      this.showActivity();
    },
    //获取用户信息
    getUserData(){
      this.$axios.get("/user/findAll/" +
            this.pageparm3.currentPage + "/" +this.pageparm3.pageSize)
        .then(res => {
          if (res.data.code == 200) {
            this.userData = res.data.data.list;
            this.pageparm3.total = res.data.data.total;
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
        })
        .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
    },
    // 显示用户列表
    showUser(obj){
      this.messageId = obj.id;
      this.userVisible = true;
      this.getUserData();
    },
    // 显示活动列表
    showActivity(){
      this.activityVisible = true;
      let queryEntity={
        currentPage:this.pageparm2.currentPage,
        pageSize:this.pageparm2.pageSize,
        entity:this.formInline2,
      };
      this.$axios.post("business/activity/condition",queryEntity)
      .then((res) => {
          if (res.data.code == 200) {
              this.activityData = res.data.data.list;
              //对总数量进行赋值
              this.pageparm2.total = res.data.data.total;
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
    },
    // 选择活动
    chooseActivity(obj){
      this.activityVisible = false;
      // 填充数据
      this.editForm.activityId = obj.id;
      this.editForm.activity.title = obj.title;
    },
    // 编辑、增加页面保存方法
    submitForm() {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("请按要求填写表单！");
        }else{
          // 判断是修改还是新增
          if (this.editForm.id == "") {
            // 新增
            this.$axios.post("/business/message/", this.editForm)
            .then((res) => {
                //关闭弹窗
                this.$refs["editForm"].resetFields();
                this.editFormVisible = false;
                if (res.data.code == 200) {
                    //刷新数据
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "保存成功！",
                    });
                } else {
                    this.$message({
                        type: "info",
                        message: res.data.message,
                    });
                }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.$message.error(err.response.data.message);
            });
          } else {
            // 修改
            this.$axios.put("/business/message/", this.editForm)
            .then((res) => {
                //关闭弹窗
                this.$refs["editForm"].resetFields();
                this.editFormVisible = false;
                if (res.data.code == 200) {
                    //刷新数据
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "保存成功！",
                    });
                } else {
                    this.$message({
                        type: "info",
                        message: res.data.message,
                    });
                }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.$message.error("保存失败，请稍后再试！");
            });
          }
        }
      });
    },
    // 删除一个
    deleteOne(obj) {
        this.$confirm("确定要删除吗?", "信息", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            this.$axios.delete("/business/message/"+obj.id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "已删除!",
                });
                this.getdata();
              } else {
                this.$message({
                  type: "info",
                  message: res.data.msg,
                });
              }
            })
            .catch((err) => {
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除
    batchDel() {
        if(this.multipleSelection.length==0){
            this.$message({
                type: "info",
                message: "请先勾选需要删除的列",
            });
            return;
        }
        this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        })
        .then(() => {
            this.$axios.post("/business/message/batchDel",this.multipleSelection)
            .then((res) => {
              this.$refs.multipleSelectable.clearSelection();
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "已删除!",
                });
                this.getdata();
              } else {
                this.$message({
                  type: "info",
                  message: res.data.msg,
                });
              }
            })
            .catch((err) => {
              this.$refs.multipleSelectable.clearSelection();
              this.$message.error(err.response.data.msg);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 启用开关
    editEnable(obj) {
      let newObj=obj;
      newObj.active=3-obj.active;
      // 修改
      this.$axios.put("business/message/", newObj)
      .then((res) => {
          if (res.data.code == 200) {
              //刷新数据
              this.getdata();
              this.$message({
                  type: "success",
                  message: "操作成功！",
              });
          } else {
              this.$message({
                  type: "info",
                  message: res.data.msg,
              });
          }
      })
      .catch((err) => {
        this.editFormVisible = false;
        this.$message.error("操作失败，请稍后再试！");
      });
    },
    // 关闭编辑、增加弹出框
    cancelDialog() {
      this.$refs["editForm"].resetFields();
      this.editFormVisible = false;
    },
    // 关闭前清空验证信息
    closeDialog(done){
      this.$refs["editForm"].resetFields();
      done();
    },
    // 关闭活动列表弹出框
    closeActivity() {
      this.activityVisible = false;
    },
    // 关闭用户列表弹出框
    closeUser() {
      this.userVisible = false;
    },
    // 处理表单多选
    handleSelectionChange(val) {
        this.multipleSelection=[];
        for(let index in val){
            this.multipleSelection[index]=val[index].id;
        }
    },
    // 处理用户多选
    userSelectionChange(val) {
        this.userSelection=[];
        for(let index in val){
            this.userSelection[index]=val[index].id;
        }
    },
    //发送消息
    send:function(){
      if(this.userSelection.length==0){
          this.$message({
              type: "info",
              message: "请先勾选需要发送消息的人",
          });
          return;
      }
      this.userVisible=false;
      this.$axios.post("/business/message/send/"+this.messageId,this.userSelection)
      .then((res) => {
        this.$refs.userSelectable.clearSelection();
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          this.getdata();
        } else {
          this.$message({
            type: "info",
            message: res.data.msg,
          });
        }
      })
      .catch((err) => {
        this.$refs.userSelectable.clearSelection();
        this.$message.error(err.response.data.message);
      });
    },
    getRowKeys(row) {
        return row.id;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.searchInput{
  width: 100px;
}
.timePicker{
  width: 230px;
}
.mySelect{
  width: 193px;
}
.searchSelect{
  width: 100px;
}
</style>
